Web developers usually create external style sheets containing CSS rules that are totally separated from the HTML5 document. This a modular approach (also known as skinning) wherein if there is a need to change the CSS file, there is no need to make any changes on the HTML5. Pseudoclasses allow web developers to access to content that has not been declared. The hover pseudoclass is activated when the mouse cursor is over a specific part of the page.
An exampe of an external CSS file is shown here:/* Style sheets */Now, let's see how an external link get established within an HTML5 page. A keyword link element is used, in addition to the attribute.
/* external style sheet */
body {font-family: arial, sans-serif;} a:hover {text-decoration: underline; } li {font-weight: bolder;} h2, em {font-family: arial, sans-serif; text-decoration: underline;} p {font-family: calibri; sans-serif; font-size: large;} ol {font-size: larger;}
The way it is done when writing the code, the programmer needs to have two links: (1)HTML file and (2) CSS file
containing formating details.
For example, in your page, your will have these 2 links:
< href="..\HTML Pages\External style sheets2.html"> rel </a>
< href="..\Style Sheets\External style sheets2.css"> the external style sheet </a>
<html>===================================================================
<head>
<title> Linking to an eternal CSS document </title>
<link rel="stylesheet" type = "text/css" href="..\Style Sheets/External style sheet.css">
</head>
<body>
<h2>List of courses offered online:</h2>
<ol>
<li> HTML5 </li>
<li> Javascript </li>
<li> CSS </li>
</ol>
<p> <a class="hover" href ="http="http://www.google.com">
Online Course </a>
</p>
</body>
</html>